<!--
 * @Description: 图标动态引用封装
 * @Author: HuiSir<https://gitee.com/huisir001>
 * @Date: 2021-11-01 16:14:25
 * @LastEditTime: 2025-09-27 12:48:44
-->
<template>
  <div class="fy-icon" :style="containerStyle">
    <!-- 根据name是否包含斜杠判断渲染为图标或图片 -->
    <template v-if="isImage">
      <img :src="name" :style="imgStyle" />
    </template>
    <template v-else>
      <el-icon :color="color" :size="Number(size)">
        <component :is="`icon-${name}`" />
      </el-icon>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";
// 组件名称（必要）
defineOptions({ name: "FyIcon" });

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  size: {
    type: [Number, String],
    default: 20,
  },
  color: {
    type: String,
    default: "var(--el-text-color-regular)",
  },
  /**
   * 调整高度，单位px
   */
  height: {
    type: [Number, String],
    default: "auto",
  },
  /**
   * 调整宽度，单位px
   */
  width: {
    type: [Number, String],
    default: "auto",
  },
  /**
   * 背景色，默认为透明
   */
  bgColor: {
    type: String,
    default: "transparent",
  },
  /**
   * 圆角尺寸，支持像素和百分比
   */
  radius: {
    type: [Number, String],
    default: 0,
  },
});

// 判断是否为图片路径
const isImage = computed(() => props.name.includes("/"));

// 容器样式
const containerStyle = computed(() => {
  const radius =
    typeof props.radius === "number" ? `${props.radius}px` : props.radius;

  return {
    width: typeof props.width === "number" ? `${props.width}px` : props.width,
    height:
      typeof props.height === "number" ? `${props.height}px` : props.height,
    backgroundColor: props.bgColor,
    borderRadius: radius,
  };
});

// 图片样式
const imgStyle = computed(() => {
  const size = Number(props.size);
  return {
    width: `${size}px`,
    height: `${size}px`,
  };
});
</script>
<style scoped lang="scss">
.fy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  img {
    object-fit: cover;
  }
}
</style>
